<template>
    <div id="integralRule">
        <div class="title">积分规则</div>
        <!-- 列表 -->
        <div class="content">
            <div class="extra">
                <div class="headline">获取积分规则</div>
                <el-table :data="tableData" style="width: 100%" highlight-current-row border :row-class-name="tableRowClassName">
                    <el-table-column prop="name" label="项目" width="auto" align="center"></el-table-column>
                    <el-table-column prop="address" label="备注" width="auto" align="center"></el-table-column>
                    <el-table-column prop="date" label="积分" width="auto" align="center"></el-table-column>
                </el-table>
            </div>
            <div class="minus">
                <div class="headline">扣减积分规则</div>
                <el-table :data="minusList" style="width: 100%" highlight-current-row border>
                    <el-table-column prop="name" width="auto" align="center"></el-table-column>
                    <el-table-column prop="address" width="auto" align="center"></el-table-column>
                    <el-table-column prop="date" width="auto" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            tableData: [{
                date: '',
                name: '个人用户注册',
                address: '10'
            }, {
                date: '每日登录只记录一次',
                name: '登录',
                address: '5'
            }, {
                date: '',
                name: '完善资料',
                address: '5'
            }, {
                date: '',
                name: '每日签到',
                address: '5'
            }], // 加分列表内容
            minusList: [{
                date: '取消超10次不可预约',
                name: '用户取消活动预定',
                address: '-10'
            }, {
                date: '一次性清零',
                name: '积分每年1月1日清零',
                address: ''
            }], // 减分列表内容
        };
	},
    mounted(){
        // this.tableRowClassName() // 设置背景颜色
    },
	methods: {
        // 设置背景颜色
        tableRowClassName({row, rowIndex}) {
            console.log(rowIndex%2)
            if (rowIndex%2 == 0) {
                return 'warningRow';
            } else if (rowIndex%2 == 1) {
                return 'successRow';
            }
            return '';
        }
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #integralRule{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            .headline{
                font-size: 20px;
                margin: 2% 0%;
                padding-left: 3%;
                border-left: 1px solid #f7b962;
            }
            /deep/ .warningRow {
                background: #f7e0c2;
            }
            /deep/ .successRow {
                background: #F9D4A2;
            }
            .extra{
                /deep/ .el-table th, .el-table tr{
                    color: white;
                    font-size: 22px;
                    font-weight: 100;
                    background: #f7b962;
                }
            }
            .minus{
                /deep/ .el-table__header-wrapper{
                    height: 0;
                }
                /deep/ .el-table__row{
                    background: #f7e0c2;
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #integralRule{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 1.5%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            .headline{
                font-size: 18px;
                margin: 1.5% 0%;
                padding-left: 2%;
                border-left: 1px solid #f7b962;
            }
            /deep/ .warningRow {
                background: #f7e0c2;
            }
            /deep/ .successRow {
                background: #F9D4A2;
            }
            .extra{
                /deep/ .el-table th, .el-table tr{
                    color: white;
                    font-size: 20px;
                    font-weight: 100;
                    background: #f7b962;
                    padding: 8px 0px;
                }
            }
            /deep/.el-table td, .el-table th{
                padding: 8px 0px;
            }
            .minus{
                /deep/ .el-table__header-wrapper{
                    height: 0;
                }
                /deep/ .el-table__row{
                    background: #f7e0c2;
                }
            }
        }
    }
}
</style>